<template>
  <zz-dialog
    :title= title
    :visible = visible
    @confirm="submitData"
    @close="close"
    :reset=true>
    <slot>
      <div class="project-name" v-if="!isonlyAddress">
        <span>项目名称：</span>
        <textarea
          class="project-input"
          placeholder="输入项目名称（60字以内,必填）"
          v-validation="{required: !isonlyAddress, query: 'projectName', max: 60}"
          v-model="projectName"></textarea>
      </div>
      <div class="project-address">
        <span>项目地址：</span>
        <zz-areaPicker
          v-validation="{area: true,query: 'pjArea', option: ['pjProvince', 'pjCity', 'pjArea']}"
          class="are-picker"
          @province="provinceHandle"
          @city="cityHandle"
          @area="areaHandle"
          :province="province"
          :city="city"
          :area="area"></zz-areaPicker>
      </div>
      <div class="details-address">
        <div style="height: 30px;line-height: 30px">
          <span>详细地址：</span>
        </div>
        <baidu-map
          style="height: 200px; width: 588px;margin-top: 2px"
          class="relative"
          @click="mapClick"
          @ready="mapReady"
          :scroll-wheel-zoom = true
          :zoom="zoom"
          :center="center">
          <bm-marker :position="markerPoint" :dragging="true"></bm-marker>
          <!--<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>-->
          <div class="absolute" style="top: -32px; left: 88px;">
            <input v-model="projectAddress" v-validation="{required: true, query: 'projectAddress'}" class="address-header"/>
            <i v-if="MapPanel" class="iconfont icon-x right closePanel" @click.stop='closePanel'></i>
            <bm-local-search
              :keyword="projectBaiDuAddress"
              :panel = MapPanel
              :pageCapacity='3'
              :auto-viewport="false"
              @infohtmlset="infohtmlset"
              class="baidu-map-search"></bm-local-search>
          </div>
        </baidu-map>
      </div>

      <div class="project-manager" v-if="!isonlyAddress">
        <span>项目负责人：</span>
        <zz-retrieve
          class="project-retrieve"
          conWidth="500px"
          :isborder= true
          :isWorker="false"
          :isFriend="false"
          v-validation="{retrieve: !isonlyAddress, query: 'projectManager'}"
          :multiple = false
          :isTip= false
          :singleCheck = true
          :isChooseDepart = false
          rId="projectManager"></zz-retrieve>
      </div>
      <div class="project-company" v-if="!isonlyAddress">
        <span>归属分公司：</span>
        <zz-retrieve
          v-validation="{retrieve: !isonlyAddress, query: 'projectCompany'}"
          class="project-retrieve"
          title = '选择归属分公司'
          :isChooseDepart = false
          :openSearch = false
          :isborder= true
          :isWorker = false
          :isCompany= true
          :multiple = false
          :singleCheck = true
          :openEmployees = false
          :isFriend = false
          :isLabel = false
          conWidth="500px"
          :isTip= false
          rId="projectCompany"></zz-retrieve>
      </div>
    </slot>
  </zz-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'editProject',
    data () {
      return {
        title: '新增项目',
        projectName: '',
        projectAddress: '',
        pjProvince: '',
        pjCity: '',
        pjArea: '',
        province: '省',
        city: '市',
        area: '区',
        edit: false,
        MapPanel: false,
        markerPoint: {},
        oldProjectNo: '',
        oldAddress: '',
        projectBaiDuAddress: '',
        center: '杭州',
        zoom: 14
      }
    },
    watch: {
      visible (status) {
        if (status) {
        } else {
          Object.assign(this.$data, this.$options.data())
        }
      },
      projectAddress (value) {
        this.projectBaiDuAddress = `${this.pjProvince}${this.pjCity}${this.pjArea}${value}`
        if (value && value !== this.oldAddress) {
          this.MapPanel = true
        } else {
          this.MapPanel = false
        }
      }
    },
    computed: {
      ...mapGetters({
        retrieveMids: 'getRetrieveMids'
      })
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      isonlyAddress: {
        type: Boolean,
        default: false
      },
      pjId: null
    },
    methods: {
      close () {
        this.$emit('close')
      },
      provinceHandle (data) {
        this.pjProvince = data.value
        // this.center = `${this.pjProvince}`
      },
      // 选择市之后回调
      cityHandle (data) {
        this.pjCity = data.value
        if (!this.pjCity) {
          this.pjArea = ''
        }
        // this.center = `${this.pjProvince}${this.pjCity}`
      },
      // 选择区之后回调
      areaHandle (data) {
        this.pjArea = data.value
        // this.center = `${this.pjProvince}${this.pjCity}${this.pjArea}`
      },
      findDetail (value) {
        this.$store.dispatch({
          type: 'actProjectDetail',
          pjId: value
        }).then((res) => {
          this.editProject(res.data.detail)
        })
      },
      // 编辑项目
      editProject (value) {
        this.edit = true
        this.title = '编辑项目'
        this.projectAddress = value.address
        this.projectName = value.title
        this.province = value.province
        this.city = value.city
        this.area = value.district
        this.pjProvince = value.province
        this.pjCity = value.city
        this.pjArea = value.district
        this.center = value.address
        this.oldAddress = value.address
        this.markerPoint = {
          lat: value.pointx,
          lng: value.pointy
        }
        // this.center = this.markerPoint
        if (value.managerList) {
          this.setPrinName(value.managerList)
        }
        this.setCompanyName(value)
      },
      setPrinName (data) {
        if (data) {
          const arr = []
          data.forEach(x => {
            const obj = {
              mid: x.member_id,
              name: x.member_name
            }
            arr.push(obj)
          })
          this.$store.dispatch({
            type: 'setRetrieveMans',
            data: arr,
            rId: 'projectManager',
            multiple: true
          })
        }
      },
      setCompanyName (value) {
        if (value.dpId) {
          const arr = []
          arr.push({
            mid: value.dpId,
            name: value.dptName
          })
          this.$store.dispatch({
            type: 'setRetrieveMans',
            data: arr,
            rId: 'projectCompany',
            multiple: false
          })
        }
      },
      // 提交数据
      submitData () {
        this.$vaildation(this).then(() => {
          let data = {
            'form.project_title': this.projectName,
            'form.province': this.pjProvince,
            'form.city': this.pjCity,
            'form.district': this.pjArea,
            'form.address': this.projectAddress,
            'form.pointx': this.pointx,
            'form.pointy': this.pointy,
            'form.member_id': this.retrieveMids['projectManager'],
            'form.did': this.retrieveMids['projectCompany']
          }
          if (this.edit) {
            data['form.project_id'] = this.pjId
          }
          let url = `${this.$site.projectServer}/front/person/addConstructionProject.htm`
          if (this.edit) {
            url = `${this.$site.projectServer}/front/person/doProjectEdit.htm`
          }
          this.$axios({
            method: 'post',
            url: url,
            data: this.$qs.stringify(data, {indices: false})
          }).then(res => {
            if (res.data.errorMsg) {
              this.$message.error(res.data.errorMsg)
            } else {
              this.close()
              this.$emit('success', this.projectName)
              this.$message.success(res.data.msg)
              this.$store.commit('removePersonProjectDefault')
            }
          })
        })
      },
      mapReady (data) {
        this.BMap = data.BMap
        if (this.pjId) {
          this.edit = true
          this.findDetail(this.pjId)
        }
      },
      mapClick (data) {
        let {point} = data
        this.markerPoint = point
        this.pointx = point.lat
        this.pointy = point.lng
        let geoc = new this.BMap.Geocoder()
        geoc.getLocation(point, (rs) => {
          let addComp = rs.addressComponents
          this.pjProvince = addComp.province
          if (addComp.province === addComp.city) {
            this.pjCity = '市辖区'
          } else {
            this.pjCity = addComp.city
          }
          this.pjArea = addComp.district
          this.street = addComp.street
          this.streetNumber = addComp.streetNumber
        })
      },
      infohtmlset (info) {
        this.MapPanel = false
        this.projectAddress = info.address
        let {point} = info
        this.pointx = point.lat
        this.pointy = point.lng
      },
      closePanel () {
        this.MapPanel = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .project-name{
    span{
      margin-right: 14px;
      vertical-align: middle;
    }
    .project-input{
      vertical-align: middle;
      display: inline-block;
      @include input-l(500px)
    }
  }
  .project-address{
    display: table;
    span{
      margin-right: 18px;
      width: 70px;
      vertical-align: middle;
    }
    .are-picker{
      height: 30px;
      line-height: 30px;
      width: 500px;
      display: table-cell;
    }
  }
  .details-address{
    span{
      vertical-align: middle;
    }
    .address-header{
      @include input-l(500px);
    }
  }
  .project-manager{
    span{
      vertical-align: middle;
    }
    .project-retrieve{
      vertical-align: middle;
      display: inline-block;
      &:first-of-type{
        margin-left: 0!important;
      }
    }
  }
  .project-company{
    span{
      vertical-align: middle;
    }
    .project-retrieve{
      vertical-align: middle;
      display: inline-block;
    }
  }
  .project-name, .project-address, .details-address, .project-manager{
    margin-bottom: 25px;
  }
  .closePanel{
    position: absolute;
    z-index: 999;
    right: 5px;
    top: 35px;
  }
</style>
